<template>
  <div class="bottom-card">
    <card-empty-item
      name="新增课件"
      @click.native="addCourse()"
    ></card-empty-item>
    <div class="f-card-item card-wrapper" v-for="item in 5" :key="item">
      <div class="card-item-top">
        <div>
          <el-avatar class="img">course</el-avatar>
        </div>
        <div class="item-top-text">二年级</div>
      </div>
      <div class="card-item-center">
        <div class="f-btn f-btn-blue" @click="btnPrepare">去备课</div>
      </div>
      <div class="card-item-bottom">
        <div class="item-bottom-btn" @click="btnEdit">编辑</div>
        <div class="item-btn-line"></div>
        <div class="item-bottom-btn" @click="btnDel">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import CardEmptyItem from "./CardEmptyItem";

export default {
  name: "CoursewareCardList",

  components: {
    CardEmptyItem,
  },

  data() {
    return {};
  },

  methods: {
    // 新增课程
    addCourse() {
      this.$router.push({ name: "addCourseware" });
    },

    // 去备课
    btnPrepare() {
      this.$router.push({ path: "/manage-index/courseware-wrapper" });
    },

    // 编辑课程
    btnEdit() {
      // TODO: 需要将当前需要编辑的数据传递给父组件
      this.$emit("eventEditCourse");
    },

    // 删除课程
    btnDel() {
      // TODO: 给id就行了
      this.$emit("eventDelCourse");
    },
  },
};
</script>

<style lang="less" scoped>
.card-wrapper {
  flex-direction: column;
  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 12%), 0 0 6px rgba(0, 0, 0, 4%);
  &:hover {
    box-shadow: 0 2px 10px 8px rgba(18, 64, 94, 0.12),
      0 4px 8px 4px rgba(109, 135, 139, 0.1);
  }
  // 部分样式在f-profile.less文件中可查找到
}
</style>